<!DOCTYPE html>
<html>
<head>
    <title>Resize</title>
    <style type="text/css">
        body {
            display: block;
        }

        .box {
            display: block;
            position: relative;
            float: left;
            clear: both;
            border: 1px solid blue;
        }

        .resizer {
            display: block;
            width: 10px;
            height: 10px;
            position: absolute;
            right: 1px;
            bottom: 1px;
            cursor: nwse-resize;
            border: 1px solid red;
            overflow: hidden;
            text-align: center;
            font-size: 14px;
        }
    </style>
    <script language="javascript">
        function getPx(px) {
            return +px.substr(0, px.length - 2);
        }

        var bodyOnMouseMove = null;
        var bodyOnMouseUp = null;

        function trackMouse(node) {
            bodyOnMouseMove = node.data_onMouseMove;
            bodyOnMouseUp = node.data_onMouseUp;
            detachMouseEvents(node, false);
        }

        function unTrackMouse(node) {
            attachMouseEvents(node);
            bodyOnMouseMove = null;
            bodyOnMouseUp = null;
        }

        function attachMouseEvents(node, onMouseDown, onMouseMove, onMouseUp) {
            if (onMouseDown) node.data_onMouseDown = onMouseDown;
            if (onMouseMove) node.data_onMouseMove = onMouseMove;
            if (onMouseUp) node.data_onMouseUp = onMouseUp;

            node.addEventListener("mousedown", node.data_onMouseDown, false);
            node.addEventListener("mousemove", node.data_onMouseMove, false);
            node.addEventListener("mouseup", node.data_onMouseUp, false);
        }

        function detachMouseEvents(node, removeHandler) {
            node.removeEventListener("mousedown", node.data_onMouseDown, false);
            node.removeEventListener("mousemove", node.data_onMouseMove, false);
            node.removeEventListener("mouseup", node.data_onMouseUp, false);

            if (removeHandler) {
                node.data_onMouseDown = undefined;
                node.data_onMouseMove = undefined;
                node.data_onMouseUp = undefined;
            }
        }

        function bodyOnLoad() {
            window.addEventListener("mousemove", function (event) {
                if (bodyOnMouseMove) {
                    bodyOnMouseMove(event);
                }
            }, false);

            window.addEventListener("mouseup", function (event) {
                if (bodyOnMouseUp) {
                    bodyOnMouseUp(event);
                }
            }, false);
        }

        function installResizer(node) {
            node.setAttribute("style", "min-width:100px; min-height:100px;");

            var resizer = document.createElement("div");
            resizer.setAttribute("class", "resizer");
            node.appendChild(resizer);

            var star = document.createTextNode("*");
            resizer.appendChild(star);

            var dragging = false;
            var x = 0.0;
            var y = 0.0;

            attachMouseEvents(
                resizer,
                function (event) {
                    dragging = true;
                    x = event.pageX;
                    y = event.pageY;
                    trackMouse(resizer);
                },
                function (event) {
                    if (dragging) {
                        var dx = event.pageX - x;
                        var dy = event.pageY - y;

                        node.style.minWidth = getPx(node.style.minWidth) + dx + "px";
                        node.style.minHeight = getPx(node.style.minHeight) + dy + "px";

                        x = event.pageX;
                        y = event.pageY;
                    }
                },
                function (event) {
                    dragging = false;
                    unTrackMouse(resizer);
                }
            );
        }
    </script>
</head>
<body onload="javascript:bodyOnLoad()">
    <div id="blueBox" class="box"></div>
    <script language="javascript">
        installResizer(blueBox);
    </script>
</body>
</html>